<template>
  <!-- 评论列表 -->
  <div class="comment-list">
    <div class="comment-item" v-for="(item, index) in list" :key="index">
      <img class="avatar" :src="item.user.avatar" v-if="item.user && item.user.avatar" />
      <div class="">
        <span class="nickname" v-if="item.user && item.user.nickname">
          {{ item.user && item.user.nickname }}：
        </span>
        <span class="content">{{ item.content }}</span>
        <!-- <span class="time">{{ item.createdAt }}</span> -->
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      list: {
        type: Array,
      },
    },
    data() {
      return {};
    },
  };
</script>

<style lang="less">
  .comment-list {
    color: #cccccc;
    .comment-item {
      color: rgba(#ffffff, 0.9);
      display: flex;
      // align-items: center;
      margin-bottom: 3rem;
      span {
        font-size: 3rem;
      }
      .nickname {
        font-weight: bold;
      }
      .time {
        margin-left: 1rem;
        color: var(--textGrayColor);
      }
    }
    .avatar {
      width: 6rem;
      height: 6rem;
      border-radius: 50%;
      flex: none;
      margin-right: 2rem;
    }
  }
</style>
